/* 日历基座组件 - 只负责日历天数的绘制 */
<template>
  <div class="el-calendar-wrapper">
    <!-- 周显示栏 -->
    <div class="calendar-month-title border">
      <div class="calendar-month-title-item" v-for="item in weekList" :key="item">
        <span>{{ item }}</span>
      </div>
    </div>
    <!-- 日期显示栏 -->
    <div class="calendar-month-content">
      <div class="border" :class="{'pre-month': isPreMonth(item),  'next-month': isNextMonth(item) }" v-for="(item, index) in dayList" :key="item">
        <slot :date="item" :index="index" :method="{ getDayList, getYearMonth }"></slot>
      </div>
    </div>
  </div>
</template>

<script>
import { getDayInMonthList } from './utils'

export default {
  props: {
    date: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      // 当前月日历面板日期列表
      dayList: getDayInMonthList(),
      // 周列表
      weekList: ['一', '二', '三', '四', '五', '六', '日']
    }
  },
  watch: {
    date: {
      handler (val) {
        this.dayList = getDayInMonthList(this.$dayjs(val).format('YYYY-MM'))
      },
      immediate: true
    }
  },
  methods: {
    isPreMonth (day) {
      return this.$dayjs(day).format('YYYY-MM') === this.$dayjs().add(-1, 'month').format('YYYY-MM')
    },
    isNextMonth (day) {
      return this.$dayjs(day).format('YYYY-MM') === this.$dayjs().add(1, 'month').format('YYYY-MM')
    },
    // 方法 - 获取当前月的日期列表
    getDayList () {
      return this.dayList
    },
    // 方法 - 获取当前年月
    getYearMonth () {
      return this.date
    }
  }
}
</script>

<style lang="scss" scoped>
  .icon {
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

  .pointer {
    cursor: pointer
  }

  .calendar-month-tool {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }

  .calendar-month-title {
    display: grid;
    height: 50px;
    grid-template-columns: repeat(7, minmax(100px, 1fr));
    justify-items: center;
    align-items: center;
    .calendar-month-title-item {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .calendar-month-content {
    display: grid;
    grid-template-columns: repeat(7, minmax(100px, 1fr));
    grid-template-rows: repeat(6, minmax(100px, 1fr));
  }

  .border {
    margin-left: -1px;
    margin-top: -1px;
    border: solid 1px #E4E7ED;
  }
</style>
